<template>
	<view class="container">
		<!-- 顶部标题栏 -->
		<view class="header">
			<view class="app-title-box" @tap="goToAIPage">
				<view class="app-title">AI 制定旅游计划</view>
			</view>

			<!-- 随机城市框 -->
			<view class="city-selector">
				<view class="city-and-button">
					<view class="city-name" @tap="randomCity">
						{{ currentCity }}
					</view>
					<!-- 将文本改为按钮 -->
					<button class="sub-text-btn city-btn" @tap="goToSurroundingRecommend">周边玩推荐</button>
				</view>
				<!-- 随机城市对应图片框 -->
				<image class="city-image" :src="currentCityImage" mode="aspectFill"></image>
			</view>
		</view>

		<!-- 主要内容区 -->
		<view class="main-content">
			<view class="section-title">推荐榜单</view>
			<!-- 推荐列表 -->
			<scroll-view scroll-y="true" style="flex: 1;height: 1px;">
				<view  class="recommendation-list">
					<view class="recommendation-item" v-for="(item, index) in recommendList" :key="index">
						<image class="item-image" :src="item.image" mode="aspectFill"></image>
						<view class="item-info">
							<view class="item-title">{{item.title}}</view>
							<view class="item-desc">{{item.desc}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	var _self
	export default {
		data() {
			return {
				currentTab: 'home',
				currentCity: '广州市',
				currentCityImage: '/static/cities/guangzhou.jpg',
				cityList: [{
						name: '北京市',
						image: '/static/cities/beijing.jpg'
					},
					{
						name: '上海市',
						image: '/static/cities/shanghai.jpg'
					},
					{
						name: '西安市',
						image: '/static/cities/xian.jpg'
					},
					{
						name: '深圳市',
						image: '/static/cities/shenzhen.jpg'
					},
					{
						name: '成都市',
						image: '/static/cities/chengdu.jpg'
					},
					{
						name: '杭州市',
						image: '/static/cities/hangzhou.jpg'
					}
				],
				recommendList: [{
						image: '/static/guangzhou1.jpg',
						title: '广州塔',
						desc: '广州地标建筑，俯瞰全城美景'
					},
					{
						image: '/static/beijing1.jpg',
						title: '天坛公园',
						desc: '祭天祈谷圣地，文化内涵深厚'
					},
					{
						image: '/static/shanghai1.jpg',
						title: '外滩',
						desc: '万国建筑博览群，夜景迷人'
					},
					{
						image: '/static/xian1.jpg',
						title: '钟鼓楼',
						desc: '古建筑瑰宝，见证千年'
					},
					{
						image: '/static/shenzhen1.jpg',
						title: '南头古城',
						desc: '千年历史，古迹与现代交融'
					},
					{
						image: '/static/hangzhou1.jpg',
						title: '西湖',
						desc: '山水如画，美景醉人'
					}
				],
				surroundingRecommendUrl: '/pages/surrounding-recommend/surrounding-recommend?city='
			};
		},
		created() {
			_self = this
		},
		onLoad() {
			console.log('token:', uni.getStorageSync('token'))
		},
		methods: {
			goToAIPage() {
				uni.navigateTo({
					url: '/pages/ai-assistant/ai-assistant'
				});
			},

			randomCity() {
				// 排除当前城市，每次点击都切换到不同城市
				const availableCities = this.cityList.filter(city => city.name !== this.currentCity);
				const randomIndex = Math.floor(Math.random() * availableCities.length);
				const selectedCity = availableCities[randomIndex];

				this.currentCity = selectedCity.name;
				this.currentCityImage = selectedCity.image;
			},

			switchTab(tab) {
				this.currentTab = tab;
				// 这里可以添加页面跳转逻辑
				// uni.navigateTo({url: '/pages/' + tab + '/' + tab});
			},

			goToSurroundingRecommend() {
				uni.navigateTo({
					url: this.surroundingRecommendUrl + this.currentCity,
				});
			}
		}
	}
</script>

<style>
	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f9fafb;
		font-family: 'Inter', sans-serif;
	}

	.header {
		padding: 1.5rem 2rem;
		background-color: #ffffff;
		border-bottom: 1px solid #e5e7eb;
		text-align: center;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	}

	.app-title-box {
		background-color: #3b82f6;
		padding: 0.75rem 1.5rem;
		border-radius: 1.5rem;
		margin: 1rem auto;
		display: inline-block;
		transition: all 0.2s ease;
	}

	.app-title-box:hover {
		transform: scale(1.05);
	}

	.app-title-box:active {
		opacity: 0.8;
		transform: scale(0.98);
	}

	.app-title {
		font-size: 1.25rem;
		font-weight: 600;
		color: #ffffff;
		margin-bottom: 0;
	}

	.city-selector {
		text-align: center;
		margin-top: 1rem;
	}

	.city-and-button {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 1.5rem;
		gap: 1rem;
	}

	/*   城市随机选择按钮 */
	.city-name {
		flex: 1;
		height: 2.8rem;
		font-size: 1rem;
		font-weight: 500;
		/* 可选：给文字加上适当的粗体 */
		color: #3b82f6;
		padding: 0.2rem 2.5rem;
		border: 1px solid #3b82f6;
		border-radius: 1rem;
		text-align: center;
		/* 确保文本水平居中 */
		line-height: 2.9rem;
		/* 使文字在垂直方向也居中 */
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.city-name:hover {
		background-color: rgba(59, 130, 246, 0.1);
	}

	.city-name:active {
		background-color: rgba(59, 130, 246, 0.2);
	}

	.city-image {
		width: 100%;
		height: 150px;
		border-radius: 1rem;
		object-fit: cover;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	}

	/* “周边玩推荐”按钮 */
	.sub-text-btn {
		background-color: #3b82f6 !important;
		color: #ffffff !important;
		border: none;
		border-radius: 1rem !important;
		overflow: hidden;
		/* 确保圆角生效 */
		font-size: 1rem;
		font-weight: 500;
		/* 给文字加上适当的粗体 */
		transition: all 0.2s ease;
		padding: 0.75rem 1.5rem;
		height: 3.25rem;
		width: 9.5rem;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		/* 确保文本水平居中 */
		line-height: 3.25rem;
		/* 使文字在垂直方向也居中 */
	}


	/* 为“周边玩推荐”按钮设置与左边城市选择按钮相同的高度 */
	.city-btn {
		height: 3.25rem;
	}

	.main-content {
		flex: 1;
		height: 1px;
		display: flex;
		padding: 2rem;
		flex-direction: column;
		box-sizing: border-box;
	}

	.section-title {
		font-size: 1.3rem;
		font-weight: 600;
		margin-bottom: 1rem;
		margin-top: -15px; 
		color: #1f2937;
	}

	.recommendation-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.recommendation-item {
		background-color: #ffffff;
		border-radius: 1rem;
		overflow: hidden;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
		height: 13rem;
		width: 45%;
		margin: 7px;
	}


	.item-image {
		width: 100%;
		height: 110px;
		object-fit: cover;
	}

	.item-info {
		padding: 1rem;
	}

	.item-title {
		font-size: 1.125rem;
		font-weight: 500;
		margin-bottom: 0.5rem;
		color: #1f2937;
	}

	.item-desc {
		font-size: 0.875rem;
		color: #6b7280;
		line-height: 1.5;
		overflow: visible;
		text-overflow: ellipsis;
	}
</style>